<template>
  <div id="BootCamp">
    <header1></header1>
    <div class="bootcamp-description layout-no-margin-top">
      <div>
        <h1>与心仪的课程偶遇</h1>
      </div>
    </div>

    <div class="bootcamp-features">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <img src="../../static/img/bootcamp-project.png" />
            <div class="bootcamp-features-description">
              <span>优秀项目</span>
              <span>专注实战</span>
            </div>
          </div>
          <div class="col-md-3">
            <img style=" padding-left: 24px;" src="../../static/img/bootcamp-teacher.png" />
            <div class="bootcamp-features-description">
              <span>技术大牛</span>
              <span>有问必答</span>
            </div>
          </div>
          <div class="col-md-3">
            <img src="../../static/img/bootcamp-comment.png" />
            <div class="bootcamp-features-description">
              <span>实验报告</span>
              <span>悉心点评</span>
            </div>
          </div>
          <div class="col-md-3">
            <img src="../../static/img/bootcamp-certificate.png" />
            <div class="bootcamp-features-description">
              <span>完成课程</span>
              <span>获得证书</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bootcamp-courses">
      <div class="container">
        <div class="bootcamp-courses-header">
          <h4 class="bootcamp-courses-title">秒杀课程</h4>
        </div>

        <div class="bootcamp-courses-body">
          <h3>今日特价</h3>
          <div v-for="timename in sk_time" :key="timename.id">
            <div v-if="timename.course.content.length!=0">
              <h4 style="text-align: left;padding: 20px 0;font-size: 24px;">
                {{timename.name}}
                <span
                  style="margin-bottom: -8px;"
                >活动时限: {{timename.course.start_time}}--{{timename.course.end_time}}</span>
              </h4>
              <h4
                style="text-align: left;"
                v-if="new Date(timename.course.now_time+' '+timename.course.start_time)>new Date()"
              >活动开始倒计时:{{timename.course.time2}}</h4>
              <h4
                style="text-align: left;"
                v-if="new Date(timename.course.now_time+' '+timename.course.start_time)<new Date() &&new Date()<new Date(timename.course.now_time+' '+timename.course.end_time)"
              >抢购中 ,活动结束倒计时:{{timename.course.time1}}</h4>
              <h4
                style="text-align: left;"
                v-if="new Date(timename.course.now_time+' '+timename.course.end_time)<new Date()"
              >已过期</h4>
              <div class="row">
                <div
                  class="bootcamp-courses-item col-md-4"
                  v-for="(i,index) in timename.course.content"
                  :key="index"
                >
                  <div class="pull-right bootcamp-courses-order">
                    <div class="pull-left">
                      <br />
                      <h5>剩余 {{i.amount}} 个课程</h5>
                    </div>
                  </div>
                  <div class="course-img">
                    <img class="media-object" :src="i.course.pic" width="300" height="170" />
                  </div>
                  <div class="media-body bootcamp-courses-body">
                    <div class="bootcamp-courses-info">
                      <h4>课程名称:{{i.course_name}}</h4>
                      <div>     
                        <p>课程信息: {{i.course.info.substring(0, 35)}}...<router-link :to="{path:'/showcourse',query:{'id':i.course.id}}">更多</router-link> </p>
                      </div>
                      <div></div>
                    </div>
                    <div class="bootcamp-courses-subscribe">
                      <div class="pull-right bootcamp-courses-order">
                        <div class="pull-left">
                          <span style="margin-bottom: -8px;">￥{{i.price}}</span>
                        </div>
                        <a
                          :class="{btn:true,'pull-right':true ,disabled:new Date(timename.course.now_time+' '+timename.course.start_time)>new Date() || new Date(timename.course.now_time+' '+timename.course.end_time)<new Date()}"
                          href="#"
                          @click="sk(timename.name,index,i.price)"
                        >秒杀</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="invite-user" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title">邀请好友，双方都可获赠实验豆！</h4>
          </div>
          <div class="modal-body">
            <div>
              <h4>
                <a href="#sign-modal" data-toggle="modal" data-sign="signin">登录</a>后邀请好友注册，您和好友将分别获赠3个实验豆！
              </h4>
            </div>

            <div id="msg-modal"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="flash-message" tabindex="-1" role="dialog">
      <div class="modal-dialog" rolw="document">
        <h1>订单生产中,将跳转至支付页面</h1>
      </div>
    </div>
    <div class="modal fade" id="modal-message" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title">注意</h4>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary confirm" data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="modal fade" id="sign-modal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <button type="button" class="close-modal" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <div class="modal-body">
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active">
                <a href="#signin-form" aria-controls="signin-form" role="tab" data-toggle="tab">登录</a>
              </li>
              <li role="presentation">
                <a href="#signup-form" aria-controls="signup-form" role="tab" data-toggle="tab">注册</a>
              </li>
            </ul>
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="signin-form">
                <form action="/login" method="post">
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-envelope" style="margin:0;"></i>
                      </div>
                      <input type="email" name="login" class="form-control" placeholder="请输入邮箱" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-lock" style="margin:0;"></i>
                      </div>
                      <input
                        type="password"
                        name="password"
                        class="form-control"
                        placeholder="请输入密码"
                      />
                    </div>
                  </div>
                  <div class="form-inline verify-code-item" style="display:none;">
                    <div class="form-group">
                      <div class="input-group">
                        <input
                          type="text"
                          name="captcha_v"
                          class="form-control"
                          placeholder="请输入验证码"
                        />
                      </div>
                    </div>
                    <img class="verify-code" src source="https://www.shiyanlou.com/captcha.gif" />
                  </div>
                  <div class="form-group remember-login">
                    <input name="remember" type="checkbox" value="y" /> 下次自动登录
                    <a class="pull-right" href="../reset_password/index.html">忘记密码？</a>
                  </div>
                  <div class="form-group">
                    <input class="btn btn-primary" name="submit" type="submit" value="进入实验楼" />
                  </div>
                  <div class="form-group widget-signin">
                    <span>快速登录</span>
                    <a href="/auth/qq?next=">
                      <i class="fa fa-qq"></i>
                    </a>
                    <a href="/auth/weibo?next=">
                      <i class="fa fa-weibo"></i>
                    </a>
                    <a href="/auth/weixin?next=">
                      <i class="fa fa-weixin"></i>
                    </a>
                    <a href="/auth/github?next=">
                      <i class="fa fa-github"></i>
                    </a>
                    <a href="/auth/renren?next=">
                      <i class="fa fa-renren"></i>
                    </a>
                  </div>
                  <div class="form-group error-msg">
                    <div class="alert alert-danger" role="alert"></div>
                  </div>
                </form>
              </div>
              <div role="tabpanel" class="tab-pane" id="signup-form">
                <form action="/register" method="post">
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-envelope" style="margin:0;"></i>
                      </div>
                      <input type="email" name="email" class="form-control" placeholder="请输入邮箱" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-lock" style="margin:0;"></i>
                      </div>
                      <input
                        type="password"
                        name="password"
                        class="form-control"
                        placeholder="请输入密码"
                      />
                    </div>
                  </div>
                  <div class="form-inline">
                    <div class="form-group">
                      <div class="input-group">
                        <input
                          type="text"
                          name="captcha_v"
                          class="form-control"
                          placeholder="请输入验证码"
                        />
                      </div>
                    </div>
                    <img class="verify-code" src source="https://www.shiyanlou.com/captcha.gif" />
                  </div>
                  <div class="form-group">
                    <input class="btn btn-primary" name="submit" type="submit" value="注册" />
                  </div>
                  <div class="form-group agree-privacy">
                    注册表示您已经同意我们的
                    <a href="../privacy/index.html" target="_blank">隐私条款</a>
                  </div>
                  <div class="form-group widget-signup">
                    <span>快速注册</span>
                    <a href="/auth/qq?next=">
                      <i class="fa fa-qq"></i>
                    </a>
                    <a href="/auth/weibo?next=">
                      <i class="fa fa-weibo"></i>
                    </a>
                    <a href="/auth/weixin?next=">
                      <i class="fa fa-weixin"></i>
                    </a>
                    <a href="/auth/github?next=">
                      <i class="fa fa-github"></i>
                    </a>
                    <a href="/auth/renren?next=">
                      <i class="fa fa-renren"></i>
                    </a>
                  </div>
                  <div class="form-group error-msg">
                    <div class="alert alert-danger" role="alert"></div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <footer1></footer1>
  </div>
</template>

<script>
import header from "./header";
import footer from "./footer";
import { send } from "../data/comm.js";
import axios from "axios";

export default {
  name: "BootCamp",
  data() {
    return {
      bootcampList: [],
      courses: [],
      countDownList: "",
      actEndTime: "2018-11-19 18:50:00",
      pay_type: 1,
      sk_time: [],
      title:'今日特价'
    };
  },
  created() {},
  components: {
    header1: header,
    footer1: footer
  },
  mounted() {
    var params = {
      title: "今日特价"
    };
    send("/api/getSk/?title=" + "今日特价", "get").then(res => {
      if (res.data.code == 200) {
        this.sk_time = res.data.data;
        this.sk_time.forEach(key => {
          this.countDown(key.course);
        });
      }
    });
    
  },
  methods: {
    sk: function(name, index,pay_price) {
      $("#flash-message").modal("show");
      var params = {
        pay_type: this.pay_type,
        user_id: localStorage.getItem("user_id"),
        title: this.title,
        name: name,
        index: index,
        pay_price:pay_price,
        types:'Miaosha'
      }
      send("/api/getSk/", "post", params).then(res => {
        if (res.data.order_sn != undefined) {
          send("/api/getpayurl/", "post",{
            order_sn:res.data.order_sn
          }).then(
            res => {
              if (res.data.code == 200) {
                window.location.href = res.data.path;
              }
            }
          );
        }
      });
    },
    gethuidiao(){
      
    },
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
    countDown(it) {
      var interval = setInterval(() => {
        // 获取当前时间，同时得到活动结束时间数组
        let newTime = new Date().getTime();
        // 对结束时间进行处理渲染到页面
        let endTime = new Date(it["now_time"] + " " + it["end_time"]).getTime();
        let obj = null;
        // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          //还有多长时间结束秒杀
          let time = (endTime - newTime) / 1000;

          // 获取天、时、分、秒
          let day = parseInt(time / (60 * 60 * 24));
          let hou = parseInt((time % (60 * 60 * 24)) / 3600);
          let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
          let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
        } else {
          // 活动已结束，全部设置为'00'
          obj = {
            day: "00",
            hou: "00",
            min: "00",
            sec: "00"
          };
          clearInterval(interval);
        }
        it["time1"] =
          obj.day + "天" + obj.hou + "时" + obj.min + "分" + obj.sec + "秒";
        console.log(it["time1"]);
      }, 1000);
      var interval2 = setInterval(() => {
        // 获取当前时间，同时得到活动结束时间数组
        let newTime = new Date().getTime();
        // 对结束时间进行处理渲染到页面
        let startTime = new Date(
          it["now_time"] + " " + it["start_time"]
        ).getTime();
        let obj = null;
        // 如果活动未结束，对时间进行处理
        if (startTime - newTime > 0) {
          //还有多长时间开始秒杀
          let time = (startTime - newTime) / 1000;

          // 获取天、时、分、秒
          let day = parseInt(time / (60 * 60 * 24));
          let hou = parseInt((time % (60 * 60 * 24)) / 3600);
          let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
          let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
        } else {
          // 活动已结束，全部设置为'00'
          obj = {
            day: "00",
            hou: "00",
            min: "00",
            sec: "00"
          };
          clearInterval(interval2);
        }

        it["time2"] =
          obj.day + "天" + obj.hou + "时" + obj.min + "分" + obj.sec + "秒";
        console.log(it["time2"]);
      }, 1000);
    }
  },
  computed: {
    //当数据发生改变时，会自动去计算
    money: function() {
      if (this.num < 100) {
        var a;
        a = (this.num / this.rule) * 1;
        return a;
      } else if (this.num > this.userInfo.integral) {
        return 0;
      } else {
        return 0;
      }
    }
  }
};
</script>

<style scoped>
</style>
